<template>
    <div class="chat-container">
        <!-- Header -->
        <a-page-header
            :title="chatTitle"
            class="chat-header"
            :avatar="chatAvatar"
        />

        <!-- Chat Messages -->
        <div class="chat-messages" ref="messagesContainer">
            <div
                v-for="(msg, idx) in messages"
                :key="idx"
                :class="['chat-message', msg.isSelf ? 'self' : 'other']"
            >
                <a-avatar :src="msg.avatar" size="small" />
                <div class="chat-content">
                    <div class="chat-username">{{ msg.username }}</div>
                    <div class="chat-text">{{ msg.content }}</div>
                    <div class="chat-time">{{ msg.time }}</div>
                </div>
            </div>
        </div>

        <!-- Input Area -->
        <div class="chat-input-area">
            <a-textarea
                v-model="input"
                :auto-size="{ minRows: 2, maxRows: 4 }"
                placeholder="请输入消息..."
                @keydown.enter.exact.prevent="sendMessage"
            />
            <a-button
                type="primary"
                class="send-btn"
                @click="sendMessage"
                :disabled="!input.trim()"
            >
                发送
            </a-button>
        </div>
    </div>
</template>

<script setup>
import { ref, computed, nextTick } from 'vue';
import { message } from 'ant-design-vue';

// 模拟数据
const chatType = ref('user'); // 'user' 或 'group'
const chatTitle = computed(() =>
    chatType.value === 'user' ? '张三' : '前端交流群'
);
const chatAvatar = computed(() =>
    chatType.value === 'user'
        ? { src: 'https://randomuser.me/api/portraits/men/32.jpg' }
        : { src: 'https://avatars.githubusercontent.com/u/1680273?s=200&v=4' }
);

const messages = ref([
    {
        username: '张三',
        avatar: 'https://randomuser.me/api/portraits/men/32.jpg',
        content: '你好！',
        time: '10:00',
        isSelf: false,
    },
    {
        username: '我',
        avatar: 'https://randomuser.me/api/portraits/men/33.jpg',
        content: '你好，有什么可以帮您？',
        time: '10:01',
        isSelf: true,
    },
]);

const input = ref('');
const messagesContainer = ref(null);

function sendMessage() {
    if (!input.value.trim()) return;
    messages.value.push({
        username: '我',
        avatar: 'https://randomuser.me/api/portraits/men/33.jpg',
        content: input.value,
        time: new Date().toLocaleTimeString().slice(0, 5),
        isSelf: true,
    });
    input.value = '';
    nextTick(() => {
        // 滚动到底部
        if (messagesContainer.value) {
            messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight;
        }
    });
}
</script>

<style scoped>
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
}
.chat-header {
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    padding: 12px 24px;
}
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    background: #f5f5f5;
}
.chat-message {
    display: flex;
    margin-bottom: 12px;
}
.chat-message.self {
    flex-direction: row-reverse;
}
.chat-message .ant-avatar {
    margin: 0 8px;
}
.chat-message.self .ant-avatar {
    margin: 0 0 0 8px;
}
.chat-content {
    max-width: 60%;
    background: #fff;
    border-radius: 6px;
    padding: 8px 12px;
    box-shadow: 0 1px 2px #0000000a;
    word-break: break-all;
}
.chat-message.self .chat-content {
    background: #e6f7ff;
}
.chat-username {
    font-size: 12px;
    color: #888;
}
.chat-text {
    font-size: 15px;
    margin: 2px 0 0 0;
}
.chat-time {
    font-size: 11px;
    color: #bbb;
    text-align: right;
}
.chat-input-area {
    display: flex;
    align-items: flex-end;
    padding: 12px 24px;
    border-top: 1px solid #f0f0f0;
    background: #fafafa;
    position: relative;
}
.chat-input-area .ant-input {
    flex: 1;
    resize: none;
}
.send-btn {
    margin-left: 12px;
    align-self: flex-end;
}
</style>